<template>
  <div class="upvote--box" id="upvoteBox">
    <img
      @click="handleVote"
      src="https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/icon/icon-vote.png"
      class="upvote--img"
    />
    <p class="upvote--count">
      <span v-if="count">{{ count }}灯</span>
    </p>
    <div class="face--box" id="faceBox">
    </div>
  </div>
</template>
<script>
export default {
  name: "publicUpvote",
  props: {
    count: {
      type: [Number, String],
      default: 10,
    },
  },
  data() {},
  methods: {
    createFace() {
      const upvoteBox = document.getElementById("faceBox");
      const face = Math.floor(Math.random() * 6) + 1;
      const trajectory = Math.floor(Math.random() * 11) + 1; // bl1~bl11

      const div = document.createElement("div");

      div.className = `face${face} trajectory${trajectory}`;
      div.addEventListener("animationend", () => {
        if (upvoteBox.contains(div)) {
          upvoteBox.removeChild(div);
        }
      });
      const likeBox = document.getElementById("faceBox");
      likeBox.appendChild(div);

    },
    handleVote() {
      this.createFace();
    },
  },
  mounted() {
  },
};
</script>

<style lang="scss">
.upvote--box {
  width: 149px;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
  .face--box {
    position: absolute;
    top: -50px;
    left: 30px;
    width: 100px;
    height: 0;
  }
  .upvote--img {
    width: 149px;
    height: 182px;
  }
  .upvote--count {
    font-weight: 400;
    font-size: 28px;
    height: 28px;
    color: #a95008;
    text-align: left;
    margin: -8px;
    font-style: normal;
  }

  div {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 0;
    /* background-image: url("./public/images/bg1.png"); */
    background-size: cover;
    z-index: 9;
  }

  .face1 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face1.png");
  }

  .face2 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face2.png");
  }

  .face3 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face3.png");
  }

  .face4 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face4.png");
  }

  .face5 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face5.png");
  }

  .face6 {
    background-image: url("https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/face/face6.png");
  }

  .trajectory1 {
    animation:
      swing_1 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory2 {
    animation:
      swing_2 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory3 {
    animation:
      swing_3 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory4 {
    animation:
      swing_4 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory5 {
    animation:
      swing_5 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory6 {
    animation:
      swing_6 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory7 {
    animation:
      swing_7 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory8 {
    animation:
      swing_8 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory9 {
    animation:
      swing_9 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory10 {
    animation:
      swing_10 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }

  .trajectory11 {
    animation:
      swing_11 1s linear forwards,
      scale 1s linear forwards,
      opacity 1s linear forwards;
  }
}

/* div.release {

  animation: upward 1s linear forwards,
    scale 1s linear forwards,
    opacity 1s linear forwards,
    swing 1s linear forwards;
} */

@keyframes swing_11 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: -10px;
  }

  100% {
    left: -18px;
  }
}

@keyframes swing_10 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: -20px;
  }

  100% {
    left: -20px;
  }
}

@keyframes swing_9 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 10px;
  }

  100% {
    left: 10px;
  }
}

@keyframes swing_8 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 20px;
  }

  100% {
    left: 20px;
  }
}

@keyframes swing_7 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 1px;
  }

  75% {
    left: 2px;
  }

  100% {
    left: 3px;
  }
}

@keyframes swing_6 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: -1px;
  }

  75% {
    left: -2px;
  }

  100% {
    left: -3px;
  }
}

@keyframes swing_5 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: -5px;
  }

  75% {
    left: -10px;
  }

  100% {
    left: -20px;
  }
}

@keyframes swing_4 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: -5px;
  }

  75% {
    left: 20px;
  }

  100% {
    left: 10px;
  }
}

@keyframes swing_3 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 10px;
  }

  75% {
    left: 20px;
  }

  100% {
    left: -10px;
  }
}

@keyframes swing_2 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 25px;
  }

  75% {
    left: 10px;
  }

  100% {
    left: 5px;
  }
}

@keyframes swing_1 {
  0% {
  }

  25% {
    left: 0;
  }

  50% {
    left: 8px;
  }

  75% {
    left: -15px;
  }

  100% {
    left: 15px;
  }
}
/* div.scale {
  animation: scale 1s linear forwards, opacity 1s linear forwards;
} */
@keyframes scale {
  0% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(1.2);
  }
}

@keyframes opacity {
  0% {
    top: 0;
  }

  10% {
    top: -10px;
  }

  75% {
    opacity: 1;
    top: -180px;
  }

  100% {
    top: -200px;
    opacity: 0;
  }
}
</style>
